<?php $this->load->view('include/navbar');?>

<div class="row">
  <div class="span12">
   <h3>Welcome <?php echo $username; ?>!</h3>

    <ul class="breadcrumb">
      <li><a href="index">Login</a></li>
    </ul>  
    
    <div class="PlayerSelect col-lg-3 well">
        <p>Select Attacker</p>
        <button onclick="startGame(true)" class="btn-sm btn-primary">Player One</button>
        <button onclick="startGame(false)" class="btn-sm btn-primary">Player Two</button>
    </div>
    <div>
      <div style='float:left;height:100px;'>
          <h4 id="PlayerOneName"></h4>
          <h4 style='color:Blue;' id="PlayerOneStatus"></h4><!--PLAYER ONE STATUS IF ATTACKER OR DEFENDER!-->
          <p style='color:red;' id="turn"></p>
          <p style='color:red;' id="notep1"></p>
          <p style='color:red;' id="endp1"></p>
          
          <button class="btn-sm btn-success" id="AcceptCards_One" onclick="AcceptCardsInPlay();"></button>  <button class="btn-sm btn-warning" id="Attack_One" onclick="AttackPlayerOne();"></button>
          <button class="btn-sm btn-warning" id="EndAttack_One" onclick="EndAttackInPlayPlayerOne();"></button>
      </div>

      <div style="float:right">
          <div class="playerone"></div><!--PLAYER ONE CARD ON HAND!-->
      </div>
    </div>
    
    <?php echo br(15);?>
    
    <div style="position:relative;height:200px; width:300px; float:left;">
        <div class="trumpsuit"></div><!--TRUMPSUIT OF THE PLAY-->
        <div class="deck"></div><!--THE DECK OF THE GAME-->
    </div>
  
    <div style="position:relative;width:860px; height:200px; float:left">
      <?php 
          for($x = 0; $x < 6; $x++){
             echo '<img class="cardThrowOne"/>';
          }
      ?>
      <br>
      <?php
          for($x = 0; $x < 6; $x++){
             echo '<img class="cardThrowTwo"/>';
          }
      ?>
    </div>

    <div style="position:relative; width:300px; float:left;" class="trumpDetails"></div>

    <?php echo br(15);?>
   
    <div style='float:right;'>
        <h4 id="PlayerTwoName"></h4>
        <h4 style='color:blue;' id="PlayerTwoStatus"></h4><!--PLAYER TWO STATUS IF ATTACKER OR DEFENDER!-->
        <p style='color:red;' id="turn"></p>
        <p style='color:red;' id="notep2"></p>
        <p style='color:red;' id="endp2"></p>
        <button class="btn-sm btn-success" id="AcceptCards_Two" onclick="AcceptCardsInPlay();"></button>  <button class="btn-sm btn-warning" id="Attack_Two" onclick="AttackPlayerTwo();"></button>
        <button class="btn-sm btn-warning" id="EndAttack_Two" onclick="EndAttackInPlayPlayerTwo();"></button>
    </div>
    
    <div>
      <div class="playertwo"></div><!--PLAYER TWO CARD ON HAND!-->
    </div>
  
  </div><!--end of <div class="span12">!-->


<!--********************** SCRIPT OF THE GAME !****************************-->

<script type="text/javascript">
var CardPlayerOne = new Array;//Player One Card On Hand
var CardPlayerTwo = new Array;//Player Two Card On Hand
var CardValPlayerOne = new Array;//Player One Card fields On Hand
var CardValPlayerTwo = new Array;//Player Two Card fields On Hand 
var CardDeck = new Array;//List Of Cards
var CardTrumpSuit = new Array;//Trumpsuit
var PlayerOneCardRevealed = new Array;//Player One Revealed
var PlayerTwoCardRevealed = new Array;//Player Two Revealed
var playerAttack;//player who attacks in the turn
var attack;//indicator if the player is on attack mode
var EndAttackTurn = false;//indicator for the End Attack turns
var Accepted;//indicator for accept cards button


function playerone_gameplay(x){//GAMEPLAY OF PLAYER ONE
  if(playerAttack){//attack mode of player one
    
    if(PlayerOneCardRevealed.length == PlayerTwoCardRevealed.length || Accepted){// 0 == 0 (TRUE)

      if(AttackTurnAllowed(PlayerTwoCardRevealed, CardPlayerTwo, PlayerOneCardRevealed)){

          attack = false;

        if(PlayerOneCardRevealed.length == 0){
            attack = true;
        }

        else if(FaceCardInPlay(Number(CardPlayerOne[x]['card_name']))){
            attack = true;
        }

        else{
              $('#notep1')[0].innerHTML = "There are no "+ CardPlayerOne[x]['card_val'] + "s in play. You can't play this card.";
              ErrorMessage($('#notep1'));
        }
    

        if(attack){// if attack is TRUE
            PlayerOneCardRevealed.push(CardPlayerOne[x]);
            
            $('.cardThrowOne')[PlayerOneCardRevealed.length - 1].src ='<?php echo base_url()."img/"?>'+CardPlayerOne[x]['card_image'];
            
            CardValPlayerOne.push(CardPlayerOne[x]);
            CardPlayerOne[x] = null;
            
            if(Accepted){     
                  $('#EndAttack_One')[0].hidden = null;
                  $('#EndAttack_One')[0].innerHTML = 'End Attack';
                  $('#AcceptCards_One')[0].hidden = "hidden";
            }
            else{             
                  $('#EndAttack_One')[0].hidden = "hidden";
                  $('#AcceptCards_Two')[0].hidden = null;
                  $('#AcceptCards_Two')[0].innerHTML = 'Accept Cards!';
            }
            
            FindNulliNdex(CardPlayerOne);

            ReloadCardOnHandPone(CardPlayerOne);

            Winner(CardPlayerOne,CardPlayerTwo);
        }
      }
    }
    else{
          $('#turn')[0].innerHTML = "Oops! just wait for your turn."; 
          ErrorMessage($('#turn'));  
          $('#EndAttack_One')[0].hidden = "hidden";
    }   
  }

  else{//defend mode of player one
      if(PlayerOneCardRevealed.length == PlayerTwoCardRevealed.length -1 && !Accepted){// 0 == -1 (FALSE)
             
             attack = false;


            if(CardTrumpSuit[0]['card_flower'] == CardValPlayerTwo[CardValPlayerTwo.length - 1]['card_flower']){
                  
                  if(CardTrumpSuit[0]['card_flower'] == CardPlayerOne[x]['card_flower'] && Number(CardPlayerOne[x]['card_name']) > Number(CardValPlayerTwo[CardValPlayerTwo.length - 1]['card_name'])){
                      attack = true;
                  }
                  else{
                      $('#notep1')[0].innerHTML = "You can't defend this card";
                      ErrorMessage($('#notep1'));
                  }      
            }
            else{
                if(((CardPlayerOne[x]['card_flower'] == CardValPlayerTwo[CardValPlayerTwo.length - 1]['card_flower']) &&
                  Number(CardPlayerOne[x]['card_name']) > Number(CardValPlayerTwo[CardValPlayerTwo.length - 1]['card_name'])) ||
                  CardPlayerOne[x]['card_flower'] == CardTrumpSuit[0]['card_flower']){

                      attack = true;
                }
                else{
                    $('#notep1')[0].innerHTML = "You can't defend this card";
                    ErrorMessage($('#notep1'));
                }
            }

            if(attack){
                PlayerOneCardRevealed.push(CardPlayerOne[x]);
                CardValPlayerOne.push(CardPlayerOne[x]);
                $('.cardThrowTwo')[PlayerOneCardRevealed.length - 1].src ='<?php echo base_url()."img/"?>'+CardPlayerOne[x]['card_image'];
                CardPlayerOne[x] = null;

                $('#AcceptCards_Two')[0].hidden = 'hidden';
                $('#EndAttack_Two')[0].hidden = null;
                $('#EndAttack_Two')[0].innerHTML = 'End Attack';
                
                FindNulliNdex(CardPlayerOne);

                ReloadCardOnHandPone(CardPlayerOne);

                Winner(CardPlayerOne,CardPlayerTwo);
            }
      }
      else{
            if(Accepted){
              $('#turn')[0].innerHTML = "";
            }
            else{
              $('#turn')[0].innerHTML = "Oops! just wait for your turn.";
              ErrorMessage($('#turn'));
            }
      }
    }
}


function playertwo_gameplay(x){//GAMEPLAY OF PLAYER TWO
  
  if(playerAttack){//Defend mode of player two      

      if(PlayerTwoCardRevealed.length == PlayerOneCardRevealed.length - 1 && !Accepted){
            attack = false;
            
            if(CardTrumpSuit[0]['card_flower'] == CardValPlayerOne[CardValPlayerOne.length - 1]['card_flower']){
              
                  if(CardTrumpSuit[0]['card_flower'] == CardPlayerTwo[x]['card_flower'] && Number(CardPlayerTwo[x]['card_name']) > Number(CardValPlayerOne[CardValPlayerOne.length - 1]['card_name'])){
                      attack = true;
                  }
                  else{
                      $('#notep2')[0].innerHTML = "You can't defend this card";
                      ErrorMessage($('#notep2'));
                  }
            }
            else{
                  if(((CardPlayerTwo[x]['card_flower'] == CardValPlayerOne[CardValPlayerOne.length - 1]['card_flower']) && 
                    Number(CardPlayerTwo[x]['card_name']) > Number(CardValPlayerOne[CardValPlayerOne.length - 1]['card_name'])) || 
                    CardPlayerTwo[x]['card_flower'] == CardTrumpSuit[0]['card_flower']){

                        attack = true;
                  }
                  else{
                      $('#notep2')[0].innerHTML = "You can't defend this card";
                      ErrorMessage($('#notep2'));
                  }
            }

            if(attack){
                PlayerTwoCardRevealed.push(CardPlayerTwo[x]);
                CardValPlayerTwo.push(CardPlayerTwo[x]);
                $('.cardThrowTwo')[PlayerTwoCardRevealed.length - 1].src ='<?php echo base_url()."img/"?>'+CardPlayerTwo[x]['card_image'];
      
                CardPlayerTwo[x] = null; 

                $('#AcceptCards_One')[0].hidden = 'hidden';
                $('#AcceptCards_Two')[0].hidden = 'hidden';
                $('#EndAttack_One')[0].hidden = null;
                $('#EndAttack_One')[0].innerHTML = 'End Attack';
                
                FindNulliNdex(CardPlayerTwo);

                ReloadCardOnHandPtwo(CardPlayerTwo);

                Winner(CardPlayerOne,CardPlayerTwo);
            }
      }
      else{
          if(Accepted){
              $('#notep2')[0].innerHTML = "";
          }
          else{
              $('#notep2')[0].innerHTML = "Oops! just wait for your turn.";
              ErrorMessage($('#notep2'));
          }
      }
      
  }

  else{//Attack mode of player two

        if(PlayerTwoCardRevealed.length == PlayerOneCardRevealed.length || Accepted){
            
          if(AttackTurnAllowed(PlayerOneCardRevealed, CardPlayerOne, PlayerTwoCardRevealed)){
              
              attack = false;
              if(PlayerTwoCardRevealed.length == 0){
                  attack = true;
              }

              else if(FaceCardInPlay(Number(CardPlayerTwo[x]['card_name']))){
                  attack = true;
              }
              else{
                  $('#notep2')[0].innerHTML = "There are no "+ CardPlayerTwo[x]['card_val'] + "s in play. You can't play this card.";
                  ErrorMessage($('#notep2'));
              }  
          

              if(attack){// if attack is TRUE
                  //console.log(CardPlayerTwo);
                  PlayerTwoCardRevealed.push(CardPlayerTwo[x]);
                  CardValPlayerTwo.push(CardPlayerTwo[x]);
                  $('.cardThrowOne')[PlayerTwoCardRevealed.length - 1].src ='<?php echo base_url()."img/"?>'+CardPlayerTwo[x]['card_image']; 
                
                  CardPlayerTwo[x] = null;
                  
                  if(Accepted){
                    $('#EndAttack_Two')[0].hidden = null;
                    $('#EndAttack_Two')[0].innerHTML = 'End Attack';
                    $('#AcceptCards_Two')[0].hidden = "hidden";
                  } 
                  else{                     
                    $('#EndAttack_One')[0].hidden = "hidden";
                    $('#AcceptCards_One')[0].hidden = null;
                    $('#AcceptCards_One')[0].innerHTML = 'Accept Cards';
                  }

                  FindNulliNdex(CardPlayerTwo); 

                  ReloadCardOnHandPtwo(CardPlayerTwo);

                  Winner(CardPlayerOne,CardPlayerTwo);
              }
              
          }
            
        }
        else{
          $('#notep2')[0].innerHTML = "Oops! just wait for your turn.";
          ErrorMessage($('#notep2'));  
          $('#EndAttack_Two')[0].hidden = "hidden";
        }   
  }
}

function FaceCardInPlay(FaceCard){//DETERMINE THE FACE OF THE CARD REVEALED in the play
    
    for(var x = 0; x < PlayerOneCardRevealed.length; x++){
        if(FaceCard == PlayerOneCardRevealed[x]['card_name']){
          return true;
        }
    }

    for(var y = 0; y < PlayerTwoCardRevealed.length; y++){
        if(FaceCard == PlayerTwoCardRevealed[y]['card_name']){
          return true;
        }
    }

    return false;
}

function GetRevealedCardsPlayerOne(){//Get all the Revealed cards in player one in the play
    FindNulliNdex(CardPlayerOne);

    for(var x = PlayerOneCardRevealed.length -1; x >= 0; x--){
        CardPlayerOne.push(PlayerOneCardRevealed.pop());
        $('.cardThrowTwo')[x].removeAttribute('src');
    }
    for(var y = PlayerTwoCardRevealed.length - 1; y >= 0; y--){
        CardPlayerOne.push(PlayerTwoCardRevealed.pop());
        $('.cardThrowOne')[y].removeAttribute('src');
    } 

    ReloadCardOnHandPone(CardPlayerOne);
}

function GetRevealedCardsPlayerTwo(){//Get all the Revealed cards in player two in the play
    FindNulliNdex(CardPlayerTwo);
   
    for(var y = PlayerTwoCardRevealed.length - 1; y >= 0; y--){
        CardPlayerTwo.push(PlayerTwoCardRevealed.pop());
        $('.cardThrowTwo')[y].removeAttribute('src');
    }

    for(var x = PlayerOneCardRevealed.length - 1; x >= 0; x--){
        CardPlayerTwo.push(PlayerOneCardRevealed.pop());
        $('.cardThrowOne')[x].removeAttribute('src');
    }

    ReloadCardOnHandPtwo(CardPlayerTwo);
}

function AutoDrawCardsPlayerOne(){
  FindNulliNdex(CardPlayerOne);

  for(var x = CardPlayerOne.length; x < 6; x++){
      if(CardDeck.length <= 0){
          if($('.trumpsuit').length > 0){
              CardPlayerOne.push(CardTrumpSuit[0]);
              $('.trumpsuit')[0].remove();
          }
          break;
      }
      else{
        console.log(CardDeck.length);
        $('.deckcard')[CardDeck.length - 1].remove();
        CardPlayerOne.push(CardDeck.pop());
      }
  }
  ReloadCardOnHandPone(CardPlayerOne);
}

function AutoDrawCardsPlayerTwo(){
  FindNulliNdex(CardPlayerTwo);

  for(var x = CardPlayerTwo.length; x < 6; x++){
      if(CardDeck.length <= 0){
          if($('.trumpsuit').length > 0){
              CardPlayerTwo.push(CardTrumpSuit[0]);
              $('.trumpsuit')[0].remove();
          }
          break;
      }
      else{
        $('.deckcard')[CardDeck.length - 1].remove();
        CardPlayerTwo.push(CardDeck.pop());
      }
  }
  ReloadCardOnHandPtwo(CardPlayerTwo);
}

function AcceptCardsInPlay(){
  if(playerAttack){
      if(!EndAttackTurn){
          Accepted = true;

          $('#EndAttack_One')[0].hidden = null;
          $('#EndAttack_One')[0].innerHTML = 'End Attack';
          $('#AcceptCards_Two')[0].hidden = 'hidden';
          $('#endp2')[0].innerHTML = 'Wait for your opponent to end attack.';
          $('#notep1')[0].innerHTML = "Add Applicable Cards In The Play...";
      }
      else{
        EndAttackTurn = false;
        GetRevealedCardsPlayerTwo();
        AutoDrawCardsPlayerOne();
        $('#endp1')[0].innerHTML = '';
        $('#Attack_Two')[0].hidden = 'hidden';
        $('#AcceptCards_Two')[0].hidden = 'hidden';
      }
  }
  else{
      if(!EndAttackTurn){
          Accepted = true;
          $('#EndAttack_Two')[0].hidden = null;
          $('#EndAttack_Two')[0].innerHTML = 'End Attack';
          $('#AcceptCards_One')[0].hidden = 'hidden';
          $('#endp1')[0].innerHTML = 'Wait for your opponent to end attack.';
          $('#notep2')[0].innerHTML = "Add Applicable Cards In The Play...";
      }
      else{
        EndAttackTurn = false;
        GetRevealedCardsPlayerOne();
        AutoDrawCardsPlayerTwo();
        $('#endp1')[0].innerHTML = '';
        $('#Attack_One')[0].hidden = 'hidden';
        $('#AcceptCards_One')[0].hidden = 'hidden';
      }
  }
}

function ClearRevealedCardsOne(POneCardRevealed){
  var length  = POneCardRevealed.length;
    for(var x = 0; x < length; x++){
        $('.cardThrowOne')[x].removeAttribute('src');
        POneCardRevealed.pop();
    } 
}

function ClearRevealedCardsTwo(PTwoCardRevealed){
  var length =  PTwoCardRevealed.length;
    for(var y = 0; y < length; y++){
        $('.cardThrowTwo')[y].removeAttribute('src');
        PTwoCardRevealed.pop();
    }
}
 
function EndAttackInPlayPlayerOne(){

  if(Accepted){
      GetRevealedCardsPlayerTwo();
      AutoDrawCardsPlayerOne();

      $('#endp1')[0].innerHTML = '';
      $('#endp2')[0].innerHTML = '';
      $('#notep1')[0].innerHTML = '';
      $('#notep2')[0].innerHTML = '';
      $('#EndAttack_One')[0].hidden = 'hidden';
      $('#AcceptCards_One')[0].hidden = 'hidden';
  }
  else
  {
      EndAttackTurn = true;
      
      for(var x = 0; x < CardPlayerOne.length; x++){
          $('.PlayerOneOnHand')[x].onclick = false;
      }
      for(var x = 0; x < CardPlayerTwo.length; x++){
          $('.PlayerTwoOnHand')[x].onclick = false;
      }

      $('#EndAttack_One')[0].hidden = 'hidden';
      $('#EndAttack_Two')[0].hidden = 'hidden';
      $('#endp1')[0].innerHTML = 'I end my attack. Choose to accept cards or to attack.';
      $('#Attack_Two')[0].hidden = null;
      $('#Attack_Two')[0].innerHTML = 'Attack';
      $('#AcceptCards_Two')[0].hidden = null;
      $('#AcceptCards_Two')[0].innerHTML = 'Accept Cards';
  }

  Accepted = false;
}


function EndAttackInPlayPlayerTwo(){
  if(Accepted){
      GetRevealedCardsPlayerOne();
      AutoDrawCardsPlayerTwo();

      $('#endp1')[0].innerHTML = '';
      $('#endp2')[0].innerHTML = '';
      $('#notep1')[0].innerHTML = '';
      $('#notep2')[0].innerHTML = '';
      $('#EndAttack_Two')[0].hidden = 'hidden';
      $('#AcceptCards_Two')[0].hidden = 'hidden';
  }
  else{
      
      EndAttackTurn = true;
      for(var x = 0; x < CardPlayerOne.length; x++){
          $('.PlayerOneOnHand')[x].onclick = false;
      }
      for(var x = 0; x < CardPlayerTwo.length; x++){
          $('.PlayerTwoOnHand')[x].onclick = false;
      }

      $('#EndAttack_One')[0].hidden = 'hidden';
      $('#EndAttack_Two')[0].hidden = 'hidden';
      $('#endp2')[0].innerHTML = 'I end my attack. Choose to accept cards or to attack.';
      $('#Attack_One')[0].hidden = null;
      $('#Attack_One')[0].innerHTML = 'Attack';
      $('#AcceptCards_One')[0].hidden = null;
      $('#AcceptCards_One')[0].innerHTML = 'Accept Cards';

     
  }

  Accepted = false;
}


function AttackPlayerTwo(){
  ClearRevealedCardsOne(PlayerOneCardRevealed);
  ClearRevealedCardsTwo(PlayerTwoCardRevealed);

  startGame(false);

  EndAttackTurn = false;

  FindNulliNdex(CardPlayerOne);
  FindNulliNdex(CardPlayerTwo);

  ReloadCardOnHandPone(CardPlayerOne);
  ReloadCardOnHandPtwo(CardPlayerTwo);

  AutoDrawCardsPlayerOne(CardPlayerOne);
  AutoDrawCardsPlayerTwo(CardPlayerTwo);


  $('#Attack_Two')[0].hidden = 'hidden';
  $('#AcceptCards_Two')[0].hidden = 'hidden';
  $('#endp1')[0].innerHTML = '';
}

function AttackPlayerOne(){
  ClearRevealedCardsOne(PlayerOneCardRevealed);
  ClearRevealedCardsTwo(PlayerTwoCardRevealed);

  startGame(true);

  EndAttackTurn = false;

  FindNulliNdex(CardPlayerOne);
  FindNulliNdex(CardPlayerTwo);

  ReloadCardOnHandPone(CardPlayerOne);
  ReloadCardOnHandPtwo(CardPlayerTwo);

  AutoDrawCardsPlayerOne(CardPlayerOne);
  AutoDrawCardsPlayerTwo(CardPlayerTwo);

  $('#Attack_One')[0].hidden = 'hidden';
  $('#AcceptCards_One')[0].hidden = 'hidden';
  $('#endp2')[0].innerHTML = '';
}

function FindNulliNdex(arrOnHand){// remove null index in the card on hand
  for (var i = 0; i < arrOnHand.length; i++) {
      if (arrOnHand[i] == null) {
          arrOnHand.splice(i--, 1);
      }
  }
}

function AttackTurnAllowed(POneCardRevealed, PlayerCards, PTwoCardRevealed){//Perform to allow attack turns in the play.
    if(Accepted){
        return PTwoCardRevealed.length <= (PlayerCards.length - POneCardRevealed.length);
    }
    else{
        return (PlayerCards.length - POneCardRevealed.length) != 0;
    }
}


function ReloadCardOnHandPone(cardOnHand){//Reload the cards on hand player one
  $('.playerone')[0].innerHTML = '';
  
  for(var x = 0; x < cardOnHand.length; x++){ 
      var right = (-47);
        $('.playerone')[0].innerHTML +=    
         '<img onclick="playerone_gameplay(' + x + ')" class="PlayerOneOnHand" style="width:'+ 130 +'px; position:relative; margin:'+ 0 +'px '+right+'px" src="' + '<?php echo base_url()."img/"?>'+cardOnHand[x]['card_image'] + '"/>';
  }
}

function ReloadCardOnHandPtwo(cardOnHand){//Reload the cards on hand player two
  $('.playertwo')[0].innerHTML = '';
  
  for(var x=0; x < cardOnHand.length; x++){ 
      var right = (-47);
        $('.playertwo')[0].innerHTML +=    
         '<img onclick="playertwo_gameplay(' + x + ')" class="PlayerTwoOnHand" style="width:'+ 130 +'px; position:relative; margin:'+ 0 +'px '+right+'px" src="' + '<?php echo base_url()."img/"?>'+cardOnHand[x]['card_image'] + '"/>';
  }
}

function startGame(GameStarted){  
  if(GameStarted){
      playerAttack = true; 
      
      $('.PlayerSelect')[0].hidden = "hidden";
      $('.trump')[0].hidden = null;
      $('.trumpDetails')[0].innerHTML = 'Trumpsuit: <h4 style="color:red">'+ CardTrumpSuit[0]['card_flower'] +'</h4>' ;

      $('#PlayerOneName')[0].innerHTML = "Player One:";
      $('#PlayerOneStatus')[0].innerHTML = "<img style='width:100px' src='<?php echo base_url().'img/attacker.png'?>'/>Attacker";
      $('#PlayerTwoName')[0].innerHTML = "Player Two:";
      $('#PlayerTwoStatus')[0].innerHTML = "<img style='width:120px' src='<?php echo base_url().'img/defender.png'?>'/>Defender";

      for(var x = 0; x < CardPlayerOne.length || x < CardPlayerTwo.length; x++){
        if(x < CardPlayerOne.length){
            $('.PlayerOneOnHand')[x].hidden = null;
        }
        if(x < CardPlayerTwo.length){
            $('.PlayerTwoOnHand')[x].hidden = null;
        }
      }
  }

  else{
      playerAttack = false;

      $('.PlayerSelect')[0].hidden = "hidden";
      $('.trump')[0].hidden = null;

      $('#PlayerOneName')[0].innerHTML = "Player One:";
      $('#PlayerOneStatus')[0].innerHTML = "<img style='width:120px' src='<?php echo base_url().'img/defender.png'?>'/>Defender";
      $('#PlayerTwoName')[0].innerHTML = "Player Two:";
      $('#PlayerTwoStatus')[0].innerHTML = "<img style='width:100px' src='<?php echo base_url().'img/attacker.png'?>'/>Attacker";

      for(var x = 0; x < CardPlayerTwo.length || x < CardPlayerOne.length; x++){
        if(x < CardPlayerOne.length){
            $('.PlayerOneOnHand')[x].hidden = null;
        }
        if(x < CardPlayerTwo.length){
            $('.PlayerTwoOnHand')[x].hidden = null;
        }
      }
  }
}

function Winner(CardPone, CardPtwo){
  if(CardPone.length == 0){
    alert('Player One Wins!');
  }
  else if(CardPtwo.length == 0){
    alert('Player Two Wins!');
  }
}

function ErrorMessage(view){
    var time;
    clearTimeout(time);
    time = setTimeout(function(){
      view.fadeOut();
    }, 500);
      view.fadeIn(0);    
}

function LoadButtons(){ 
    $('#EndAttack_Two')[0].hidden = "hidden";
    $('#AcceptCards_One')[0].hidden = "hidden";    
    $('#Attack_One')[0].hidden = "hidden";

    $('#EndAttack_One')[0].hidden = "hidden"; 
    $('#AcceptCards_Two')[0].hidden = "hidden";
    $('#Attack_Two')[0].hidden = "hidden";
}
   
function get_result(){
$.ajax({
  url: '<?php echo base_url();?>index.php/guest/generate_cards',
  data:'',
  dataType: 'json',
  success: function(data){
  CardDeck = data[0];
  CardPlayerOne = data[1];
  CardPlayerTwo = data[2];
  CardTrumpSuit = data[3];
  
  for(var x=0; x < CardPlayerOne.length; x++)
  { 
    var right = (-47);
      $('.playerone')[0].innerHTML +=    
       '<img hidden="hidden" onclick="playerone_gameplay(' + x + ')" class="PlayerOneOnHand" style="width:'+ 130 +'px; position:relative; margin:'+ 0 +'px '+right+'px" src="' + '<?php echo base_url()."img/"?>'+CardPlayerOne[x]['card_image'] + '"/>';
  }
  for(var x=0; x < CardDeck.length; x++)
  { 
    var right = (x*2);
    var top = x*-1;
    $('.deck')[0].innerHTML += 
        '<img class="deckcard" style="width:'+ 130 +'px; z-index:100;transform:rotate(180deg) ;position:absolute; margin:'+ top +'px '+right+'px" src="' + '<?php echo base_url()."img/Blue_Back.png"?>'+ '"/>' ;              
  }

  for(var x=0; x < CardTrumpSuit.length; x++)
  { 
    $('.trumpsuit')[0].innerHTML += 
        '<img class="trump" hidden="hidden" style="width:130px; z-index:100;position:absolute; margin:0 0 0 80px; transform:rotate(90deg)" src="' + '<?php echo base_url()."img/"?>'+ CardTrumpSuit[x]['card_image'] + '"/>' ;              
  }

  for(var x=0; x < CardPlayerTwo.length; x++)
  { 
    var right = (-47);
    $('.playertwo')[0].innerHTML += 
        '<img hidden="hidden" onclick="playertwo_gameplay(' + x + ')" class="PlayerTwoOnHand" style="width:'+ 130 +'px; position:relative; margin:'+ 0 +'px '+right+'px" src="' + '<?php echo base_url()."img/"?>'+ CardPlayerTwo[x]['card_image']+ '"/></a>';               
  }
         
    } // End of success function of ajax form
  }); // End of ajax call
}

  $(document).ready(function(){

    $.ajaxSetup({ cache: false }); 
    get_result();
    });
</script>

  

 